import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../common/app_colors.dart';
import 'radar_chart1_logic.dart';

class RadarChart1Page extends StatelessWidget {
  RadarChart1Page({Key? key}) : super(key: key);

  final logic = Get.put(RadarChart1Logic());
  final state = Get.find<RadarChart1Logic>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<RadarChart1Logic>(builder: (logic) {
      return Container(
        decoration: const BoxDecoration(
            color: AppColors.colorFF1B2339,
            borderRadius: BorderRadius.all(Radius.circular(8))),
        margin: const EdgeInsets.only(
          left: 32,
          right: 32,
          top: 32,
          bottom: 32,
        ),
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Title configuration',
              style: TextStyle(
                color: AppColors.mainTextColor2,
              ),
            ),
            Row(
              children: [
                const Text(
                  'Angle',
                  style: TextStyle(
                    color: AppColors.mainTextColor2,
                  ),
                ),
                Slider(
                  value: state.angleValue,
                  max: 340,
                  onChanged: (double value) {
                    logic.angleValue(value);
                  },
                ),
                Checkbox(
                  value: state.relativeAngleMode,
                  onChanged: (v) {
                    logic.relativeAngleMode(v);
                  },
                ),
              ],
            ),
            GestureDetector(
              onTap: () {
                logic.categories();
              },
              child: Text(
                'Categories'.toUpperCase(),
                style: const TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.w300,
                  color: AppColors.mainTextColor1,
                ),
              ),
            ),
            const SizedBox(height: 4),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: rawDataSets()
                  .asMap()
                  .map((index, value) {
                    final isSelected = index == state.selectedDataSetIndex;
                    return MapEntry(
                      index,
                      GestureDetector(
                        onTap: () {
                        logic.rawDataItem(index);
                        },
                        child: AnimatedContainer(
                          duration: const Duration(milliseconds: 300),
                          margin: const EdgeInsets.symmetric(vertical: 2),
                          height: 26,
                          decoration: BoxDecoration(
                            color: isSelected
                                ? AppColors.pageBackground
                                : Colors.transparent,
                            borderRadius: BorderRadius.circular(46),
                          ),
                          padding: const EdgeInsets.symmetric(
                            vertical: 4,
                            horizontal: 6,
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              AnimatedContainer(
                                duration: const Duration(milliseconds: 400),
                                curve: Curves.easeInToLinear,
                                padding: EdgeInsets.all(isSelected ? 8 : 6),
                                decoration: BoxDecoration(
                                  color: value.color,
                                  shape: BoxShape.circle,
                                ),
                              ),
                              const SizedBox(width: 8),
                              AnimatedDefaultTextStyle(
                                duration: const Duration(milliseconds: 300),
                                curve: Curves.easeInToLinear,
                                style: TextStyle(
                                  color: isSelected
                                      ? value.color
                                      : state.gridColor,
                                ),
                                child: Text(value.title),
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  })
                  .values
                  .toList(),
            ),
            AspectRatio(
              aspectRatio: 1.3,
              child: RadarChart(
                RadarChartData(
                  radarTouchData: RadarTouchData(
                    touchCallback: (FlTouchEvent event, response) {
                      logic.touchCallback(event,response);
                    },
                  ),
                  dataSets: showingDataSets(),
                  radarBackgroundColor: Colors.transparent,
                  borderData: FlBorderData(show: false),
                  radarBorderData: const BorderSide(color: Colors.transparent),
                  titlePositionPercentageOffset: 0.2,
                  titleTextStyle:
                      TextStyle(color: state.titleColor, fontSize: 14),
                  getTitle: (index, angle) {
                    final usedAngle = state.relativeAngleMode
                        ? angle + state.angleValue
                        : state.angleValue;
                    switch (index) {
                      case 0:
                        return RadarChartTitle(
                          text: 'Mobile or Tablet',
                          angle: usedAngle,
                        );
                      case 2:
                        return RadarChartTitle(
                          text: 'Desktop',
                          angle: usedAngle,
                        );
                      case 1:
                        return RadarChartTitle(text: 'TV', angle: usedAngle);
                      default:
                        return const RadarChartTitle(text: '');
                    }
                  },
                  tickCount: 1,
                  ticksTextStyle:
                      const TextStyle(color: Colors.transparent, fontSize: 10),
                  tickBorderData: const BorderSide(color: Colors.transparent),
                  gridBorderData: BorderSide(color: state.gridColor, width: 2),
                ),
                swapAnimationDuration: const Duration(milliseconds: 400),
              ),
            ),
          ],
        ),
      );
    });
  }

  List<RadarDataSet> showingDataSets() {
    return rawDataSets().asMap().entries.map((entry) {
      final index = entry.key;
      final rawDataSet = entry.value;

      final isSelected = index == state.selectedDataSetIndex
          ? true
          : state.selectedDataSetIndex == -1
              ? true
              : false;

      return RadarDataSet(
        fillColor: isSelected
            ? rawDataSet.color.withOpacity(0.2)
            : rawDataSet.color.withOpacity(0.05),
        borderColor:
            isSelected ? rawDataSet.color : rawDataSet.color.withOpacity(0.25),
        entryRadius: isSelected ? 3 : 2,
        dataEntries:
            rawDataSet.values.map((e) => RadarEntry(value: e)).toList(),
        borderWidth: isSelected ? 2.3 : 2,
      );
    }).toList();
  }

  List<RawDataSet> rawDataSets() {
    return [
      RawDataSet(
        title: 'Fashion',
        color: state.fashionColor,
        values: [
          300,
          50,
          250,
        ],
      ),
      RawDataSet(
        title: 'Art & Tech',
        color: state.artColor,
        values: [
          250,
          100,
          200,
        ],
      ),
      RawDataSet(
        title: 'Entertainment',
        color: state.entertainmentColor,
        values: [
          200,
          150,
          50,
        ],
      ),
      RawDataSet(
        title: 'Off-road Vehicle',
        color: state.offRoadColor,
        values: [
          150,
          200,
          150,
        ],
      ),
      RawDataSet(
        title: 'Boxing',
        color: state.boxingColor,
        values: [
          100,
          250,
          100,
        ],
      ),
    ];
  }
}

class RawDataSet {
  RawDataSet({
    required this.title,
    required this.color,
    required this.values,
  });

  final String title;
  final Color color;
  final List<double> values;
}
